<<template>
    <div class="front-page-container">
        <div class="front-page">
            <goods-sourse2 :cgoods="goods" @handleSearch="handleSearch" @refresh="refresh"></goods-sourse2>
            <div v-if="null !== goods && goods.length > 0"
                style="width: 100%;display:flex;justify-content: center;margin-top: 10px;">
                <el-pagination background layout="prev, pager, next" :page-size="6" :total="total"
                    @current-change="handleCurrentChange" />
            </div>
        </div>
        <div class="right-info">
            <div class="free-btn">
                <img src="@/assets/img/fabuxinxi2.png" @click="toPublish">
            </div>
            <div class="top-info">
                <div style="font-size:18px"><strong>近期热门信息</strong></div>
                <div class="item-info" v-for="(item, index) in goodsTopics" :key="index" @click="detailsClick(item)">
                    {{ index + 1 }}、{{ item.content }}</div>
            </div>
        </div>
    </div>
</template>

    <script setup>
    import GoodsSourse2 from "@/components/GoodsSource2.vue";
    import { selectAllPage, selectGoodsPage } from '@/api/order'
    import { ref } from 'vue'
    import { useRouter } from 'vue-router'
    const router = useRouter()

    //商品（订单）总数
    const total = ref(0)
    // 商品（订单）列表
    const goods = ref([])
    // 热门信息列表
    const goodsTopics = ref([])
    //初始化
    const load = () => {
        // 获取商品（订单）列表
        selectAllPage({ keys: '', pageNum: 1 }).then((res) => {
            goods.value = res.data.data;
            total.value = res.data.total;
        });
        // 获取热门信息
        selectGoodsPage().then((res) => {
            goodsTopics.value = res.data;
        });
    }
    load()

    // 分页
    const handleCurrentChange = (val) => {
        // 获取商品（订单）列表
        selectAllPage({ keys: '', pageNum: val }).then((res) => {
            goods.value = res.data.data;
        });
    }

    //搜索
    const searchValue = ref('')
    const handleSearch = (val) => {
        searchValue.value = val
        // 获取商品（订单）列表
        selectAllPage({ keys: searchValue.value, pageNum: 1 }).then((res) => {
            goods.value = res.data.data;
            total.value = res.data.total;
        });
    }

    //刷新
    const refresh = () => {
        // 获取商品（订单）列表
        selectAllPage({ keys: '', pageNum: 1 }).then((res) => {
            goods.value = res.data.data;
            total.value = res.data.total;
        });
    }

    //详情
    const detailsClick = (item) => {
        router.push(`/index/good_details?orderId=${item.orderId}`).catch((err) => err);
    }

</script>



    <style lang="scss" scoped>
    .front-page-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 1100px;
        margin: 10px auto;
    }

    .front-page {
        width: 780px;
        margin: 0 auto;
        background-color: #fff;
    }

    .item-info {
        line-height: 25px;
        cursor: pointer;
        margin-top: 10px;

        &:hover {
            color: #035D1C;
            text-decoration: underline;
        }
    }

    .right-info {
        padding: 10px 20px;
        height: 900px;
        width: 300px;
        min-height: 360px;
        background-color: #fff;
        text-align: left;
        color: #1d1b1b;

        .free-btn {
            text-align: center;
            cursor: pointer;
        }

        .top-info {
            font-size: 13px;
            margin-top: 20px;
        }
    }
</style>